<template>
  <div>
    <div style="text-align: left">
      <a-button v-print="'#printContent'" type="primary" icon="printer">打印</a-button>
      <a-button type="primary" icon="edit" style="margin-left: 10px" @click="handleEdit">编辑</a-button>
    </div>

    <a-descriptions title="" bordered style="margin-top: 10px;" id="printContent">
      <a-descriptions-item label="昵称">
        {{model.nickName}}
      </a-descriptions-item>
      <a-descriptions-item label="姓名">
        {{model.realName}}
      </a-descriptions-item>
      <a-descriptions-item label="性别">
        {{model.gender_dictText}}
      </a-descriptions-item>
      <a-descriptions-item label="出生日期">
        {{model.birthday}}
      </a-descriptions-item>
      <a-descriptions-item label="注册时间">
        {{model.createTime}}
      </a-descriptions-item>
      <a-descriptions-item label="体重">
        {{model.weight}}
      </a-descriptions-item>
      <a-descriptions-item label="身高">
        {{model.height}}
      </a-descriptions-item>
      <a-descriptions-item label="健康顾问">
        {{model.adviser}}
      </a-descriptions-item>
      <a-descriptions-item label="常用地址">
        {{model.address}}
      </a-descriptions-item>
      <a-descriptions-item label="定制内容" :span="3">
        {{model.custom_dictText}}
      </a-descriptions-item>
      <a-descriptions-item label="健康诉求" :span="3" >
        <div style="white-space: pre-wrap">{{model.appeal}}</div>
      </a-descriptions-item>
      <a-descriptions-item label="健康目标" :span="3">
        <div style="white-space: pre-wrap">{{model.target}}</div>
      </a-descriptions-item>
    </a-descriptions>

    <member-modal ref="modal" @getById="getById"></member-modal>

  </div>
</template>
<script>
  import { getAction, postAction } from '@api/manage'
  import ACol from 'ant-design-vue/es/grid/Col'
  import MemberModal from './MemberModal'

  export default {
    name: 'MemberInfo',
    components: { MemberModal, ACol },
    data() {
      return {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        model: {}
      }

    },
    created() {

    },
    methods: {
      handleEdit() {
        this.$refs.modal.edit(this.model)
        this.$refs.modal.title="编辑会员信息"
      },
      getById(id) {
        getAction('/ums/member/' + id).then(res => {
          if (res.success) {
            this.model = res.result
          } else {
            this.$message.warning(res.message)
          }
        })
      }
    }
  }

</script>
<style scoped>

  .label_left {
    text-align: center;
    line-height: 50px;
    background-color: #dddddd;
    border-bottom: solid 2px #dddddd;
    border-top: solid 2px #dddddd
  }

  .label_right {
    line-height: 50px;
    padding-left: 20px;
    border-bottom: solid 2px #dddddd;
    border-top: solid 2px #dddddd;
    border-right: solid 2px #dddddd
  }

</style>